<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>背景</title>

        <style type="text/css">
            .wrapper {
                width: 80% ;
                height: 400px ;
                border: 1px solid blue ;
                background-color: #dedede ;
                background-image: url( '/images/moon-cake.jpg' ) ; /* 设置背景图像的路径 */
                /* repeat | repeat-x | repeat-y | no-repeat */
                background-repeat: no-repeat ; /* 控制背景图像的重复方式 */
                margin: 15px auto ;
            }

            .first { background-position: top left ; /* 单独设置背景图像的位置 */ }
            .second { background-position: bottom right ; /* 单独设置背景图像的位置 */ }
            .third { background-position: 20px 50px  ; /* 单独设置背景图像的位置 ( 左偏移  上偏移 )*/ }
            .fourth { 
                background-position: -391px -267px ; /* 单独设置背景图像的位置 */ 
                transition: background-position 1s ; /* 控制 属性值 变化时的过渡效果 */
            }
            .fourth:hover { background-position: 0 0 ; }

            .fifth {
                background-position : center ;
                transition: background-image 1s ;
            }

            .fifth:hover { background-image: url( '/images/bg1.jpg' ); }
        </style>

    </head>
    <body>

        <div class="wrapper first"></div>

        <div class="wrapper second"></div>

        <div class="wrapper third"></div>

        <div class="wrapper fourth"></div>

        <div class="wrapper fifth"></div>


    </body>
</html>